<template>
  <view style="padding: 15px">
    <u--form
        ref="uForm"
        :model="form_data"
        :rules="rules"
        labelPosition="left"
        labelWidth="80px"
    >
      <u-form-item
          borderBottom
          label="店铺名称"
      >
        <u--input
            v-model="form_data.shop_name"
            border="none"
            readonly
        ></u--input>
      </u-form-item>
      <u-form-item
          borderBottom
          label="微信号"
          prop="wechat_account"
      >
        <u--input
            v-model="form_data.wechat_account"
            border="none"
            placeholder="用于接收微信小店分享员邀请"
        ></u--input>
      </u-form-item>
      <u-form-item
          borderBottom
          label="手机号"
          prop="mobile_number"
      >
        <u--input
            v-model="form_data.mobile_number"
            border="none"
        >
          <!--     要收费，暂时不用     -->
          <!--          <template slot="suffix">-->
          <!--            <u-button-->
          <!--                text="获取微信手机号"-->
          <!--                open-type="getPhoneNumber"-->
          <!--                size="mini"-->
          <!--                @getPhoneNumber="getPhoneNumber"-->
          <!--            ></u-button>-->
          <!--          </template>-->
        </u--input>
      </u-form-item>
      <u-form-item
          borderBottom
          label="昵称"
          prop="nickname"
      >
        <input
            v-model="form_data.nickname"
            border="none"
            type="nickname"
            @change="getWxNickname"
        >
        </input>
      </u-form-item>
      <u-form-item
          borderBottom
          label="头像"
          prop="avatar"
      >
        <button
            open-type="chooseAvatar"
            style="margin-left: 0;border: none;padding: 0;width: 80px;height: 80px;outline: none;background: none;"
            @chooseavatar="chooseWxAvatar"
        >
          <u-upload
              :fileList="fileList1"
              :maxCount="1"
              :previewFullImage="true"
              multiple
              name="1"
              @delete="deleteAvatar"
          ></u-upload>
        </button>
      </u-form-item>
      <u-form-item
      >
        <u-button type="primary" @click="submit">提交申请</u-button>
      </u-form-item>
    </u--form>
  </view>
</template>

<script>
import value from "uview-ui/components/u-text/value";
import {uploadImage} from "@/api/file-manager";
import {postSharerForm} from "@/api/sharer";

export default {
  name: "form",
  computed: {
    value() {
      return value
    }
  },
  data() {
    return {
      fileList1: [{}],
      form_data: {
        shop_id: 0,
        shop_name: '',
        wechat_account: '',
        mobile_number: '',
        nickname: '',
        avatar: '',
      },
      rules: {
        'wechat_account': {
          type: 'string',
          required: true,
          message: '请填写微信号，6到20个字符',
          //trigger: ['blur', 'change'],
          min: 6,
          max: 20,
        },
        'mobile_number': {
          type: 'string',
          required: true,
          message: '请填写手机号码，11位数字',
          //trigger: ['blur', 'change'],
          pattern: /^1[3-9]\d{9}$/,
        },
        'nickname': {
          type: 'string',
          required: true,
          message: '请填写昵称，1到20个字符',
          //trigger: ['blur', 'change'],
          min: 1,
          max: 20,
        },
        'avatar': {
          type: 'string',
          required: true,
          message: '请设置头像',
          //trigger: ['blur', 'change'],
        },
      },

    }
  },
  onLoad(options) {
    this.form_data.shop_id = options.shop_id
    this.form_data.shop_name = options.shop_name
    this.form_data.wechat_account = options.wechat_account || ''
    this.form_data.mobile_number = options.mobile_number || ''
    this.form_data.nickname = options.nickname || ''
    if (options.avatar) {
      this.setAvatarUploaded(options.avatar)
    }
  },
  onReady() {
    this.$refs.uForm.setRules(this.rules)
  },
  methods: {
    getWxNickname(e) {
      console.log(e)
      this.form_data.nickname = e.detail.value
    },
    chooseWxAvatar(info) {
      console.log(info)
      this.fileList1[0] = {
        url: info.detail.avatarUrl,
        status: 'pending',
        message: '等待上传'
      }
      this.form_data.avatar = info.detail.avatarUrl
    },
    setAvatarUploading() {
      this.fileList1[0].status = 'uploading'
      this.fileList1[0].message = '上传中'
    },
    setAvatarUploaded(finalUrl) {
      this.fileList1[0].status = 'success'
      this.fileList1[0].message = ''
      this.fileList1[0].url = finalUrl
      this.form_data.avatar = finalUrl
    },
    // 删除图片
    deleteAvatar(e) {
      this.fileList1 = []
      this.form_data.avatar = ''
    },
    submit() {
      // 验证并提交
      this.$refs.uForm.validate().then(async res => {
        // 如果avatar已经是https://开头，则直接使用，否则使用oss上传
        if (this.form_data.avatar.indexOf('https://') !== 0) {
          // 开始上传头像
          this.setAvatarUploading()
          const finalUrl = await this.uploadFile(this.form_data.avatar)
          this.setAvatarUploaded(finalUrl)
        }

        // 订阅消息
        uni.requestSubscribeMessage({
          tmplIds: [process.env.VUE_APP_SHARER_FORM_STATUS_SUBID],
          success(res) {
            console.log("订阅消息成功", res)
          },
          fail(err) {
            console.log("订阅消息失败", err)
          },
          complete: () => {
            // 提交表单
            postSharerForm(this.form_data).then(res => {
              console.log("提交分享员申请", res)
              // 跳转到列表
              uni.navigateTo({
                url: '/pages/sharer/form-list'
              })
            }).catch((err) => {
              console.log(err)
            })
          }
        })
      })
    },
    uploadFile(url) {
      return new Promise((resolve, reject) => {
        uploadImage(url, {
          path: 'sharer-mp/avatar'
        }).then(res => {
          console.log("头像上传结果", res)
          resolve(res.url)
        })
      })
    },
  }
}
</script>

<style lang="scss" scoped>

</style>